<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/10/13 0013
  Time: 上午 10:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<link rel="stylesheet" type="text/css" href="css/custom.css?v=1.3">
<link rel="stylesheet" type="text/css" href="css/responsive.css?v=1.3">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.js" type="text/javascript"></script>
<script src="layui/jquery-1.8.3.js" type="text/javascript"></script>
<head>
    <title>Title</title>
    <style type="text/css">

        body:hover {
            cursor: pointer;
        }

        #nav {
            margin: 10px auto;
            width: 800px;
            clear: both;
        }

        .line {
            background-color: #a7cbff;
            height: 3px;
        }

        #ord a, .layui-tab-title li a {
            text-decoration: none;
            color: #1965b3;
        }

        a:hover {
            color: #0000FF;
            text-decoration: none;
        }

        .layui-tab-title li a {
            font-size: 20px;
            line-height: 30px;
            font-weight: 300;
        }

        .OrderTb td a {
            font-size: 12px;
            line-height: 20px;
            color: #1965b3;
        }


        .OrderTb th {
            text-align: center;
        }
        #ord img {
            border: 0px;
            vertical-align: middle;
        }

        .cart_td_2,
        .cart_td_3,
        .cart_td_4,
        .cart_td_5,
        .cart_td_6,
        .cart_td_8 {
            background-color: #e2f2ff;
            border-bottom: solid 1px #d1ecff;
            border-top: solid 1px #d1ecff;
            text-align: center;
            padding: 5px;
        }


        .cart_td_3,
        .cart_td_4,
        .cart_td_5,
        .cart_td_6 {
            border-right: solid 1px #FFF;
        }

        .cart_td_3 {
            text-align: left;
        }

        .cart_td_4 {
            font-weight: bold;
        }
        .shopInfo{
            text-align: left;
            font-size: 12px;
            line-height: 20px;
        }
    </style>
</head>
<body>
<div class="se-pre-con"></div>
<div class="main">

    <!-- HEADER START -->
    <script src="js/head.js"></script>
    <!-- HEADER END -->

    <!-- Bread Crumb STRAT -->
    <div class="banner inner-banner1">
        <div class="container">
            <section class="banner-detail center-xs">
                <h1 class="banner-title">Account</h1>
                <div class="bread-crumb right-side float-none-xs">
                    <ul>
                        <li><a href="index.html"><i class="fa fa-home"></i>Home</a>/</li>
                        <li><span>Account</span></li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
    <!-- Bread Crumb END -->

    <!-- CONTAIN START -->
    <section class="checkout-section ptb-60">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <div class="account-sidebar account-tab mb-sm-30">
                        <div class="tab-title-bg">
                            <div class="heading-part">
                                <div class="sub-title"><span></span> My Account</div>
                            </div>
                        </div>
                        <div class="account-tab-inner">
                            <ul class="account-tab-stap">

                                <li id="step2"> <a href="javascript:void(0)">Account Details<i class="fa fa-angle-right"></i> </a> </li>
                                <li id="step3"> <a href="javascript:void(0)">My Order List<i class="fa fa-angle-right"></i> </a> </li>
                                <li id="step4"> <a href="javascript:void(0)">Change Password<i class="fa fa-angle-right"></i> </a> </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div id="data-step2" class="account-content" data-temp="tabdata">
                        <div class="row">
                            <div class="col-12">
                                <div class="heading-part heading-bg mb-30">
                                    <h2 class="heading m-0">Account Details</h2>
                                </div>
                            </div>
                        </div>
                        <div class="m-0">
                            <form class="main-form full">
                                <div class="mb-20">
                                    <div class="row">
                                        <div class="col-12 mb-20">
                                            <div class="heading-part">
                                                <h3 class="sub-heading">详情信息</h3>
                                            </div>
                                            <hr>
                                        </div>
                                        <div class="col-md-6">
                                            真实姓名: <input type="text" value="${user.userName}">
                                        </div>
                                        <div class="col-md-6">
                                            邮箱: <input type="text" value="${user.email}">
                                        </div>
                                        <div class="col-md-6">
                                            手机号: <input type="text" value="${user.userTel}">
                                        </div>
                                        <div class="col-md-6">
                                            地址: <input type="text" value="${user.address}">
                                        </div>
                                        <!--<div class="col-md-6">
                                          <div class="input-box">
                                            <input type="text" required placeholder="真实姓名">
                                          </div>
                                        </div>
                                        <div class="col-md-6">
                                          <div class="input-box">
                                            <input type="email" required placeholder="邮箱">
                                          </div>
                                        </div>
                                        <div class="col-md-6">
                                          <div class="input-box">
                                            <input type="text" required placeholder="宿舍" readonly="readonly">
                                            <span>请提供电话号码和宿舍信息，在下面正确选择你的宿舍信息(例:南苑5号楼202室)</span>
                                          </div>
                                        </div>
                                        <div class="col-md-6">
                                          <div class="input-box">
                                            <input type="text" required placeholder="联系电话">
                                          </div>
                                        </div>
                                        <div class="col-md-6">
                                          <div class="input-box select-dropdown">
                                            <fieldset id="docSet">
                                              <select name="shippingCountryId" class="option-drop" id="doc">
                                                <option>请选择</option>
                                              </select>
                                            </fieldset>
                                          </div>
                                        </div>
                                        <div class="col-md-6">
                                          <div class="input-box select-dropdown">
                                            <fieldset>
                                              <select name="shippingstateId" class="option-drop" id="room">
                                                <option>请选择</option>
                                              </select>
                                            </fieldset>
                                          </div>
                                        </div>-->
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div id="data-step3" class="account-content" data-temp="tabdata" style="display:none">
                        <div id="form-print" class="admission-form-wrapper">
                            <div class="row">
                                <div class="col-12">
                                    <div class="heading-part heading-bg mb-30">
                                        <h2 class="heading m-0">My Orders</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 mb-xs-30">
                                    <div class="cart-item-table commun-table">
                                        <div class="table-responsive">
                                            <ul class="layui-tab-title">
                                                <li class="layui-this" lay-id="11">
                                                    <a id="MyOrder" class="orderMsg">所有订单</a>
                                                </li>
                                                <li lay-id="22">
                                                    <a id="noBuyerOrder" class="orderMsg">买到未交易</a>
                                                </li>
                                                <li lay-id="33">
                                                    <a id="BuyerOrder" class="orderMsg">买到已交易</a>
                                                </li>
                                                <li lay-id="44">
                                                    <a id="noSellerOrder" class="orderMsg">卖出未交易</a>
                                                </li>
                                                <li lay-id="55">
                                                    <a id="SellerOrder" class="orderMsg">卖出已交易</a>
                                                </li>
                                            </ul>
                                            <div id="ord" style="text-align: center">
                                                <table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping" class="OrderTb">
                                                    <tr>
                                                        <th style="line-height: 25px;" colspan="2">宝贝</th>
                                                        <th width="100px">&ensp;单价</th>
                                                        <th width="100px">数量</th>
                                                        <th width="120px">实付款</th>
                                                        <th width="100px">交易操作</th>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="6" class="line"></td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="print-btn text-center mt-30">
                                    <button onclick="printDiv('form-print')" class="btn btn-color" type="button">Print</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="data-step4" class="account-content" data-temp="tabdata" style="display:none">
                        <div class="row">
                            <div class="col-12">
                                <div class="heading-part heading-bg mb-30">
                                    <h2 class="heading m-0">Change Password</h2>
                                </div>
                            </div>
                        </div>
                        <form class="main-form full" action="user/UpdatePwdServlet" method="post">
                            <div class="row">
                                <input type="hidden" name="id" value="${user.userId}">
                                <div class="col-12">
                                    <div class="input-box">
                                        <label for="old-pass">原密码</label>
                                        <input type="password"  value="${user.userPwd}" required id="old-pass">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="input-box">
                                        <label for="login-pass">新密码</label>
                                        <input type="password" name="newPwd" placeholder="Enter your Password" required id="login-pass">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="input-box">
                                        <label for="re-enter-pass">确认密码</label>
                                        <input type="password" name="reNewPwd" placeholder="Re-enter your Password" required id="re-enter-pass">
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button class="btn-color" type="submit" name="submit">Change Password</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- CONTAINER END -->

    <!-- FOOTER START -->
    <script src="js/foot.js"></script>
    <!-- FOOTER END -->
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.downCount.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/fotorama.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/common.js"></script>
</body>
<script src="/layui/layui.all.js" charset="utf-8"></script>
<script>
    var dormitory = ["南苑1号楼", "南苑2号楼", "南苑3号楼", "南苑4号楼", "南苑5号楼", "南苑6号楼", "南苑7号楼", "南苑8号楼",
        "南苑9号楼", "南苑10号楼", "南苑11号楼", "南苑12号楼", "南苑13号楼", "南苑14号楼", "南苑15号楼", "南苑16号楼",
        "北苑1号楼", "北苑2号楼", "北苑3号楼", "北苑4号楼", "北苑5号楼", "北苑6号楼", "北苑7号楼", "北苑8号楼",
        "北苑9号楼", "北苑10号楼", "北苑11号楼", "北苑12号楼", "北苑13号楼", "北苑14号楼", "北苑15号楼", "北苑16号楼",
    ];
    var room = ["101", "102", "103", "104", "105", "106", "107", "108", "109", "110", "111", "112", "113", "114", "115", "116", "117", "118", "119", "120", "121", "122",
        "201", "202", "203", "204", "205", "206", "207", "208", "209", "210", "211", "212", "213", "214", "215", "216", "217", "218", "219", "220", "221", "222",
        "301", "302", "303", "304", "305", "306", "307", "308", "309", "310", "311", "312", "313", "314", "315", "316", "317", "318", "319", "320", "321", "322",
        "401", "402", "403", "404", "405", "406", "407", "408", "409", "410", "411", "412", "413", "414", "415", "416", "417", "418", "419", "420", "421", "422",
        "501", "502", "503", "504", "505", "506", "507", "508", "509", "510", "511", "512", "513", "514", "515", "516", "517", "518", "519", "520", "521", "522",
        "601", "602", "603", "604", "605", "606", "607", "608", "609", "610", "611", "612", "613", "614", "615", "616", "617", "618", "619", "620", "621", "622",
    ];

    $(function() {
        //初始化数据
        initData();
        //为宿舍下拉列表绑定change事件
        $("#docSet").on("DOMNodeInserted",".ui-selectmenu-text",function(){
            $("#room").html("<option>请选择</option>");
            $(room).each(function(i, obj) {
                var option = "<option value='" + i + "'>" + obj + "</option>"
                $("#room").append(option);
            })
        })
    })

    function initData() {
        //初始化宿舍下拉列表
        $(dormitory).each(function(index, obj) {
            var option = "<option value='" + index + "'>" + obj + "</option>"
            $("#doc").append(option);

        })
    }


    var flag = 1;
    var state;
    var getOrderServlet;
    var opera;
    var operation;
    var operationServlet;
    $(function () {
        opera = function (obj, orderId) {
            console.log(orderId);
            var op = $(obj).attr("id");
            if (op == "delOrder") {
                layer.confirm('真的删除此订单么?', {
                        btn: ['确定', '取消'],
                        shade: false,
                        closeBtn: 0
                    },

                    function () {
                        layer.close(layer.index);
                        var operationServlet="DelOrderServlet";
                        operation(operationServlet, orderId, obj)
                    }
                );
            }
            if (op == "confOrder") {
                layer.confirm('确认收货吗?', {
                        btn: ['确定', '取消'],
                        shade: false,
                        closeBtn: 0
                    },

                    function () {
                        layer.close(layer.index);
                        var operationServlet="EndOrderServlet";
                        operation(operationServlet, orderId, obj);
                    }
                );
            }
            var operation=function(operationServlet, orderId,obj) {
                console.log(operationServlet);
                console.log(orderId);
                console.log(obj);
                $.ajax({
                    url: operationServlet,
                    type: "post",
                    data: {
                        "orderId" : orderId
                    },
                    success: function (data) {
                        console.log(data);
                        console.log(typeof data);
                        if (operationServlet=="DelOrderServlet"){
                            if (data=="true") {
                                $(obj).parent().parent().prev().remove(); //删除前一tr
                                $(obj).parent().parent().remove(); //删除当前tr
                            } else {
                                alert("删除失败")
                            }

                        } else {
                            if (data=="true") {
                                $(obj).parent().parent().prev().remove(); //删除前一tr
                                $(obj).parent().parent().remove(); //删除当前tr
                            } else {
                                alert("失败!")
                            }
                        }

                    }
                })
            }
        }

        var getOrderList = function (getOrderServlet, state, flag) {
            console.log(getOrderServlet)
            $.ajax({
                url: getOrderServlet || "SelMyOrderServlet",
                type: "post",
                dataType: "json",
                data: {
                    "state": state
                },
                success: function (data) {
                    $(".OrderTb").find("tr[class='orderdata']").remove();

                    if (flag == 1) {
                        $.each(data, function (index, obj) {
                            console.log(obj);
                            var ms;
                            if (obj.state == 0) {
                                ms = '未交易'
                            } else {
                                ms = '已交易'
                            }
                            var $ordertr =
                                "<tr class='orderdata'>" +
                                "<td colspan='2' class='shopInfo'>订单时间:" + obj.orderTime + "<br/>订单编号:" + obj.orderNum + "</td>" +
                                "<td colspan='2'>卖家：<a href='#'>" + obj.seller.userName + "</a></td>" +
                                "<td colspan='2'><img src='images/taobao_relation.jpg' alt='relation'/</td>" +
                                "</tr>" +
                                "<tr class='orderdata'>" +
                                "<td class='cart_td_2'><img src = 'goodsimage/" + obj.goods.image + "' href=''  alt='shopping'/></td>" +
                                "<td class='cart_td_3'><a target='_blank' href='/product-page.html?goodsId="+obj.goods.goodsId+"'>" + obj.goods.goodsContent + "</a><br/>保障：<img src='images/taobao_icon_01.jpg' alt='icon'/></td> " +
                                "<td class='cart_td_4'>" + obj.goods.price + "</td>" +
                                "<td class='cart_td_5'>" + obj.sellNum + "</td>" +
                                "<td class='cart_td_6'>" + obj.totalPrice + "</td>" +
                                "<td class='cart_td_8'><span id='sp'>" + ms + "</span></td>" +
                                "</tr>";

                            $(".OrderTb").append($ordertr)
                        });
                    }
                    if (flag == 2) {
                        $.each(data, function (index, obj) {
                            var $ordertr =
                                "<tr class='orderdata'>" +
                                "<td colspan='2' class='shopInfo'>订单时间:" + obj.orderTime + "<br/>订单编号:" + obj.orderNum + "</td>" +
                                "<td colspan='2'>卖家：<a href='#'>" + obj.seller.userName + "</a></td>" +
                                "<td colspan='2'><img src='images/taobao_relation.jpg' alt='relation'/</td>" +
                                "</tr>" +
                                "<tr class='orderdata'>" +
                                "<td class='cart_td_2'><img src = 'goodsimage/" + obj.goods.image + "' alt='shopping'/></td>" +
                                "<td class='cart_td_3'><a target='_blank' href='/product-page.html?goodsId="+obj.goods.goodsId+"'>" + obj.goods.goodsContent + "</a><br/>保障：<img src='images/taobao_icon_01.jpg' alt='icon'/></td> " +
                                "<td class='cart_td_4'>" + obj.goods.price + "</td>" +
                                "<td class='cart_td_5'>" + obj.sellNum + "</td>" +
                                "<td class='cart_td_6'>" + obj.totalPrice + "</td>" +
                                "<td class='cart_td_8'><a id='confOrder' onclick='opera(this," + obj.orderId + ")'>确认收货</a></td>" +
                                "</tr>";
                            $(".OrderTb").append($ordertr)
                        });
                    }
                    if (flag == 3) {
                        $.each(data, function (index, obj) {
                            var $ordertr =
                                "<tr class='orderdata'>" +
                                "<td colspan='2' class='shopInfo'>订单时间:" + obj.orderTime + "<br/>订单编号:" + obj.orderNum + "</td>" +
                                "<td colspan='2'>卖家：<a target='_blank' href='/product-page.html?goodsId="+obj.goods.goodsId+"'>" + obj.seller.userName + "</a></td>" +
                                "<td colspan='2'><img src='images/taobao_relation.jpg' alt='relation'/</td>" +
                                "</tr>" +
                                "<tr class='orderdata'>" +
                                "<td class='cart_td_2'><img src = 'goodsimage/" + obj.goods.image + "' alt='shopping'/></td>" +
                                "<td class='cart_td_3'><a href='#'>" + obj.goods.goodsContent + "</a><br/>保障：<img src='images/taobao_icon_01.jpg' alt='icon'/></td> " +
                                "<td class='cart_td_4'>" + obj.goods.price + "</td>" +
                                "<td class='cart_td_5'>" + obj.sellNum + "</td>" +
                                "<td class='cart_td_6'>" + obj.totalPrice + "</td>" +
                                "<td class='cart_td_8'><a id='delOrder' onclick='opera(this," + obj.orderId + ")'>删除</a></td>" +
                                "</tr>";
                            $(".OrderTb").append($ordertr);

                        });
                    }
                    if (flag == 4) {
                        $.each(data, function (index, obj) {
                            var $ordertr =
                                "<tr class='orderdata'>" +
                                "<td colspan='2' class='shopInfo'>订单时间:" + obj.orderTime + "<br/>订单编号:" + obj.orderNum + "</td>" +
                                "<td colspan='2'>卖家：<a href='#'>" + obj.seller.userName + "</a></td>" +
                                "<td colspan='2'><img src='images/taobao_relation.jpg' alt='relation'/</td>" +
                                "</tr>" +
                                "<tr class='orderdata'>" +
                                "<td class='cart_td_2'><img src = 'goodsimage/" + obj.goods.image + "' alt='shopping'/></td>" +
                                "<td class='cart_td_3'><a target='_blank' href='/product-page.html?goodsId="+obj.goods.goodsId+"'>" + obj.goods.goodsContent + "</a><br/>保障：<img src='images/taobao_icon_01.jpg' alt='icon'/></td> " +
                                "<td class='cart_td_4'>" + obj.goods.price + "</td>" +
                                "<td class='cart_td_5'>" + obj.sellNum + "</td>" +
                                "<td class='cart_td_6'>" + obj.totalPrice + "</td>" +
                                "<td class='cart_td_8'>交易未完成</td>" +
                                "</tr>";
                            $(".OrderTb").append($ordertr)
                        });
                    }
                    if (flag == 5) {
                        $.each(data, function (index, obj) {
                            var $ordertr =
                                "<tr class='orderdata'>" +
                                "<td colspan='2' class='shopInfo'>订单时间:" + obj.orderTime + "<br/>订单编号:" + obj.orderNum + "</td>" +
                                "<td colspan='2'>卖家：<a target='_blank' href='/product-page.html?goodsId="+obj.goods.goodsId+"'>" + obj.seller.userName + "</a></td>" +
                                "<td colspan='2'><img src='images/taobao_relation.jpg' alt='relation'/</td>" +
                                "</tr>" +
                                "<tr class='orderdata'>" +
                                "<td class='cart_td_2'><img src = 'goodsimage/" + obj.goods.image + "' alt='shopping'/></td>" +
                                "<td class='cart_td_3'><a href='#'>" + obj.goods.goodsContent + "</a><br/>保障：<img src='images/taobao_icon_01.jpg' alt='icon'/></td> " +
                                "<td class='cart_td_4'>" + obj.goods.price + "</td>" +
                                "<td class='cart_td_5'>" + obj.sellNum + "</td>" +
                                "<td class='cart_td_6'>" + obj.totalPrice + "</td>" +
                                "<td class='cart_td_8'>交易已完成</td>" +
                                "</tr>";
                            $(".OrderTb").append($ordertr)
                        });
                    }

                }
            })
        }
        $(".orderMsg").click(function () {
            var action = $(this).attr("id");
            if (action == "MyOrder") {
                getOrderServlet = "SelMyOrderServlet";
                flag = 1;
                getOrderList(getOrderServlet, null, flag)
            }
            if (action == "noBuyerOrder") {
                getOrderServlet = "SelBuyerOrderServlet";
                state = 0;
                flag = 2;
                getOrderList(getOrderServlet, state, flag)
            }
            if (action == "BuyerOrder") {
                getOrderServlet = "SelBuyerOrderServlet";
                state = 1;
                flag = 3;
                getOrderList(getOrderServlet, state, flag)
            }
            if (action == "noSellerOrder") {
                getOrderServlet = "SelSellerOrderServlet";
                state = 0;
                flag = 4;
                getOrderList(getOrderServlet, state, flag)
            }
            if (action == "SellerOrder") {
                getOrderServlet = "SelSellerOrderServlet";
                state = 1;
                flag = 5;
                getOrderList(getOrderServlet, state, flag)
            }
        })


        getOrderList(getOrderServlet, null, flag)

    })


</script>

</html>
